<template>
    <div class="editNotProjectForm">
        <div class="one">
            <el-row :gutter="10" justify="space-around">
                <el-col :span="1">
                    <router-link to="/Form">
                        <el-button type="primary" size="larger">返回</el-button>
                    </router-link>
                </el-col>
                <el-col :span="1" :offset="1">
                    <el-button type="primary" size="larger" @click="projectShow = true;isProject.projectIdTrueList = isProject.initProjectTrue">批量编辑</el-button>
                </el-col>
            </el-row>
        </div>

        <el-row>
            <el-table :data="tableData" stripe style="width: 98%" v-loading.body="loading">
                <el-table-column type="index" width="100">
                </el-table-column>
                <el-table-column prop="projectName" align="start" label="非长征项目名称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="manufacturersName" align="start" label="厂家" show-overflow-tooltip>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="140" align='center'>
                    <template scope="scope">
                        <el-button type="primary" size="mini">
                            <span @click="editManufacturers(scope.row)"> 编辑厂家</span>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <el-dialog title="非长征项目" :visible.sync="projectShow" :modal-append-to-body='false' top="10%">
            <el-checkbox-group v-model="isProject.projectIdTrueList">
                <i v-for="item in isProject.projectList" :key="item._id" style="margin-right : 10px">
                    <el-checkbox :label="item._id">{{item.detailName}}</el-checkbox>
                </i>
            </el-checkbox-group>
            <div slot="footer">
                <el-button @click="projectShow = false">取 消</el-button>
                <el-button type="primary" @click="submitProject(isProject.projectIdTrueList)">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改厂家 弹窗 -->
        <el-dialog title="修改厂家" :visible.sync="manufacturersShow" :modal-append-to-body='false' top="10%">
            <el-radio-group v-model="manufacturers.manufacturersCheckTrue" style="padding:5px;">
                <i v-for="item in manufacturers.manufacturersList" :key="item.id">
                    <el-radio-button :label="item._id" style="margin-right : 10px">{{item.manufacturersName}}</el-radio-button>
                </i>
            </el-radio-group>
            <div slot="footer">
                <el-button @click="manufacturersShow = false">取 消</el-button>
                <el-button type="primary" @click="submitManufacturers()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import moment from 'moment';
export default {
    name: "missionStatement",
    data() {
        return {
            tableData: [],
            loading: true,
            projectShow: false,
            isProject: {
                projectList: [],//所有长征得项目
                projectIdTrueList: [],//项目选中id列表
                initProjectTrue: []//项目重新点击时候赋值用
            },
            manufacturersShow: false,
            manufacturers: {
                manufacturersList: [],//所有厂家
                initmanufacturersTrue: '',//厂家重新点击时候赋值用
                manufacturersCheckTrue: '',//厂家选中id列表
                projectId: '',
                mobId: ''
            }

        }
    },
    methods: {
        editManufacturers: function(res) {
            this.manufacturers.manufacturersCheckTrue = res.manufacturersId;
            this.manufacturers.projectId = res.projectId;
            this.manufacturersShow = true;
        },
        submitManufacturers: function() {
            this.manufacturers.mobId = sessionStorage.getItem("mobId");
            console.log(this.manufacturers)
            this.$http.post('api/mobTask/editManufacturersChenkboxByMobId', this.manufacturers).then(res => {
                let result = res.data;
                if (result.code == 100) {
                    this.manufacturersShow = false;
                    this.initList();
                    this.message("编辑成功", 'success');
                }
            });
        },
        submitProject: function(res) {
            console.log(res)
            let editModel = {
                mobId: sessionStorage.getItem("mobId"),
                projectIdList: res
            }
            this.$http.post('api/editProject/editProjectListByMobId', { editModel: editModel }).then(res => {
                let result = res.data;
                if (result.code == 100) {
                    this.projectShow = false;
                    this.initList();
                    this.message("编辑成功", 'success');
                }
            });
        },
        queryAllProjectList: function() {//获取所有projectDetail集合
            this.$http.post('api/mobTask/getProjectDetailList').then(res => {
                let result = res.data;
                if (result.code == 100) {
                    let result_ = [];
                    this.isProject.projectList = result.data;
                }
            });
        },
        initManufacturers: function() {//厂家初始化
            this.$http.post('api/manufacturers/queryListByStatusZero').then(res => {
                let result = res.data;
                console.log(result, 'changjia');
                if (result.code == 100) {
                    this.manufacturers.manufacturersList = result.data;
                }
            });
        },
        initList: function() {
            let mobId = sessionStorage.getItem("mobId");
            this.$http.post('api/mobTask/getMobListByMobId', { mobId: mobId }).then(res => {
                let result = res.data;
                if (result.code == 100) {
                    this.loading = false;
                    console.log(result.data.mob.notProject, 'result.data')
                    let notProjectList = result.data.mob.notProject;
                    this.tableData = notProjectList;
                    //项目checkbox选中数组
                    let projectTrue = [];
                    notProjectList.forEach(function(element) {
                        projectTrue.push(element.projectId);
                    });
                    this.isProject.initProjectTrue = projectTrue;
                    this.isProject.projectIdTrueList = projectTrue;
                }
            });
        },
        message: function(msg, type) {
            this.$message({
                message: msg,
                type: type
            });
        }
    },
    created: function() {
        this.initList();
        this.queryAllProjectList();
        this.initManufacturers();
    }
}
</script>
<style lang="css" scoped>
.one {
    margin-bottom: 15px;
    margin-top: 15px;
}
</style>